<template>
    <div>
        <Card>
            <p slot="title">
                企业详情
            </p>
            <div>
                <Form class="step-form" ref="userData" :model="userData" :label-width="100">
                    <Row span="24">
                        <i-col span="12" >
                            <FormItem label="企业名称：" label-position="left" :label-width="150">
                                {{userData.name}}
                            </FormItem>
                        </i-col>
                        <i-col span="12" >
                            <FormItem label="企业地址：" prop="address" label-position="left" :label-width="100">
                                {{userData.address}}
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="24">
                        <i-col span="12" >
                            <FormItem label="法人身份证号：" label-position="left" :label-width="150">
                                {{userData.legalCard}}
                            </FormItem>
                        </i-col>
                        <i-col span="12" >
                            <FormItem label="法人姓名：" label-position="left" :label-width="100">
                                {{userData.legalPerson}}
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="企业类型：" prop="partyType" label-position="left" :label-width="150">
                               <Radio-group v-model="userData.partyType">
                                    <!--<Radio :label="1">2P</Radio>-->
                                    <Radio :label="2">4S</Radio>
                                    <Radio :label="3">质押监管员</Radio>
                                    <Radio :label="4">2B</Radio>
                                    <Radio :label="5">小b</Radio>
                                    <Radio :label="6">个人</Radio>
                                </Radio-group>
                            </FormItem>
                        </i-col>
                    </Row>
                    <!--<Row span="12">
                        <i-col span="12" >
                            <FormItem label="手机号：" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="userData.legalPhone" type="text" placeholder="手机号不能为空" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="营业执照号：" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="userData.businessLicense" type="text" placeholder="营业执照号不能为空" />
                            </FormItem>
                        </i-col>
                    </Row>-->
                    <Row span="24">
                        <i-col span="8">
                            <FormItem label="营业执照图片：" label-position="left" :label-width="150">
                                <img v-if="userData.businessLicenseUrl !== ''" :src="userData.businessLicenseUrl" height="200" width="200">
                            </FormItem>
                        </i-col>
                        <i-col span="8">
                            <FormItem label="身份证正面：" label-position="left" :label-width="150">
                                <img v-if="userData.cardUrl !== ''" :src="userData.cardUrl" height="200" width="200">
                            </FormItem>
                        </i-col>
                        <i-col span="8">
                            <FormItem label="身份证背面：" label-position="left" :label-width="150">
                                <img v-if="userData.cardBackUrl !== ''" :src="userData.cardBackUrl" height="200" width="200">
                            </FormItem>
                        </i-col>
                    </Row>
                    <!--<Row span="12">
                        <i-col span="10">
                            <FormItem label="门头照：" label-position="left" :label-width="150">
                                <img v-if="userData.doorHeaderUrl !== ''" :src="userData.doorHeaderUrl" height="200" width="200">
                            </FormItem>
                        </i-col>
                    </Row>-->

                    <Row span="24">
                        <i-col class='small-title' span="2" >
                            设置数据
                        </i-col>
                        <i-col style='color:#3399ff;' span="2" >
                           <span @click="bindPartyData(userData.partyType)">绑定设置</span>
                        </i-col>
                        <i-col style='color:#3399ff;' span="2" >
                           <span @click="getPartyUser(userData.partyType)">对接人设置</span>
                        </i-col>
                    </Row>
                    <Row span="24">
                        <div style='margin-top:20px;'>
                            <!-- <Table class='hide-header-checkbox' border :loading="data_loading" :columns="partyColumns" :data="partyData"  @on-select="getSel"  @on-select-cancel="selectCancel"></Table>-->
                            <Table border :columns="partyColumns" :data="partyData"></Table>
                        </div>
                    </Row>
                    <FormItem style="margin-top:50px;text-align: center;">
                        <Button type="info" @click="back" style="width:150px;" >返回列表</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
        <!--绑定设置-->
        <Modal v-model="partyDataModel" width="720" :closable="true">
            <p slot="header" style="color:#f60;">
                <Icon type="information-circled"></Icon>
                <span>2b企业数据</span>
            </p>
            <Form label-position="left" :label-width="72">
                <Row :gutter="15">
                    <i-col span="12">
                    <FormItem label="企业名称：">
                        <Input v-model="partyname" placeholder="请输入企业名称"/>
                    </FormItem>
                    </i-col>
                    <i-col span="6">
                    <Button type="success" @click="searchData" icon="ios-search" >搜索</Button>
                    </i-col>
                </Row>
            </Form>
            <div style='margin-top:20px;'>
                <Table class='hide-header-checkbox' border :columns="nobind_columns" :data="nobind_data" @on-select="getSel" @on-select-cancel="selectCancel"></Table>
            </div>
            <div slot="footer">
                <Button type="info" @click="addPartyData()" size="large">确定</Button>
            </div>
        </Modal>
        <!--对接人设置弹窗-->
        <Modal v-model="partyUserModel" width="720" :closable="true">
            <p slot="header" style="color:#f60;">
                <Icon type="information-circled"></Icon>
                <span>企业人员</span>
            </p>
            <!--<Form label-position="left" :label-width="72">
                <Row :gutter="15">
                    <i-col span="12">
                    <FormItem label="联系方式：">
                        <Input v-model="userPhone" placeholder="请输入联系方式"/>
                    </FormItem>
                    </i-col>
                    <i-col span="6">
                    <Button type="success" @click="searchData" icon="ios-search" >搜索</Button>
                    </i-col>
                </Row>
            </Form>-->
            <div style='margin-top:20px;'>
                <Table class='hide-header-checkbox' border :columns="user_columns" :data="user_data" @on-selection-change="selectChange"></Table>
            </div>
            <div slot="footer">
                <Button type="info" @click="receiverData()" size="large">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            hasSubmit: true,
            // 图片上传
            file: null,
            status: 'wait',
            userId:'',               // 当前登陆人员的id
            uploadLoading: false,    // 上传图片时候的加载效果,
            failreason:"",           // 审核失败
            selectData:[],           // 选中数据存储
            selectReceiverData:[],   // 选中推送人员数据存储
            partyId:'',              // 当前企业的id
            partyname:'',            // 企业名称
            userPhone:'',            // 用户的手机号
            modal1:false,
            testModelShow:false,
            partyDataModel:false,
            partyUserModel:false,
            data_loading:false,
            nobind_columns:[
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '企业名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '企业法人',
                    align: 'center',
                    key: 'legalPerson'
                },
                {
                    title: '身份证号',
                    align: 'center',
                    key: 'legalCard'
                }
            ],
            user_columns:[
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '用户姓名',
                    align: 'center',
                    key: 'realName'
                },
                {
                    title: '联系方式',
                    align: 'center',
                    key: 'mobile'
                },
                {
                    title: '身份证号',
                    align: 'center',
                    key: 'cardNum'
                }
            ],
            partyColumns: [
                {
                    title: '企业名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '企业法人',
                    align: 'center',
                    key: 'legalPerson'
                },
                {
                    title: '身份证号',
                    align: 'center',
                    key: 'legalCard'
                },
                {
                    title: '绑定时间',
                    align: 'center',
                    key: 'relationTime'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 80,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.relieveBindData(params.row.relationId)
                                        }
                                    }
                                },
                                '解绑'
                            )
                        ])
                    }
                }
            ],
            partyData: [],
            nobind_data: [],
            user_data: [],           // 企业下的用户
            receiver:'',             // 接收推送人id(多个以逗号隔开)
            symptomList:[],
            selectModel:[],
            userData: {
                id:'',                // id
                name:'',              // 企业名称
                legalPerson:'',       // 法人姓名
                legalCard:'',         // 法人身份证号
                legalPhone: '',       // 手机号
                businessLicense:'',   // 营业执照号
                businessLicenseUrl:'',// 营业执照图片
                cardUrl:'',           // 身份证正面
                cardBackUrl:'',       // 身份证背面
                partyType:0,          // 企业类型
                doorHeaderUrl:''      // 门头照
            },
        }
    },
    created () {
        this.init()
    },
    activated () {},
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'partyindex')
            this.userId = window.localStorage.getItem('userId')
            let id = this.$route.params.id
            this.partyId = id
            this.personalInfo(id)
        },
        // 获取数据
        personalInfo(id){
            let _that = this;
            let url = 'adminlogin/selectCjPartyById'
            let data = {
                id: id
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.userData = res.data
                   _that.partyData = res.relationPartys
                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        //返回至首页
        back(){
            this.$router.push({
                name: 'partyindex'
            })
        },
         //企业数据显示
        bindPartyData(partyType){
            this.partyDataModel = true
            this.bindPartyDataInfo(5)
        },
         //企业人员数据显示
        getPartyUser(){
            this.partyUserModel = true
            let _that = this
            //获取未绑定的数据信息
            let url = 'adminlogin/party/selectUser'
            let data = {
                partyId:_that.partyId
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.user_data = res.data
                    let r = res.receiver
                   _that.receiver = res.receiver
                   if(r != ""){
                       var arr =  r.split(',');
                       // 1、循环获取的数据
                        _that.user_data.forEach(item => {
                            // 2、循环选中的数据
                            for (let val of arr) {
                                // 3、比较数据，如果相等，则默认选中
                                if (item.id === val) {
                                    item._checked = true
                                }
                            }
                        })
                   }

                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })


        },
        bindPartyDataInfo(partyType){
            //显示数据
            let _that = this
            //获取未绑定的数据信息
            let url = 'adminlogin/party/selectNoBindDataBig'
            let data = {
                partyType:partyType,
                partyname:_that.partyname
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.nobind_data = res.nobindPartys
                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })

        },
        //搜索
        searchData(){
            let _that = this
            this.bindPartyDataInfo(5)
        },
        // 对接人设置弹窗
        receiverData(){
            this.partyUserModel = false
            let _that = this
            //存储绑定的小b信息
            let bindStr = this.selectReceiverData.join(',')
            let url = 'adminlogin/party/updateReceiver'
            let data = {
                partyId:_that.partyId,
                bindStr:bindStr
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.personalInfo(_that.partyId)
                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        // 绑定设置弹窗
        addPartyData(){
            this.partyDataModel = false
            let _that = this
            //存储绑定的小b信息
            let bindStr = this.selectData.join(',')
            let url = 'adminlogin/party/addCjPartyRelation'
            let data = {
                BIG_B_ID:_that.partyId,
                bindStr:bindStr,
                USE_STATUS:1,
                DATA_SOURCE:1,
                CREATE_USER:_that.userId
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.personalInfo(_that.partyId)
                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        getSel (seletion, row) {
           this.selectData.push(row.id)
        },
        selectCancel (seletion, row) {
            let _selets = this.selectData
            // 从选种的集合中删除数据
            for (var i = _selets.length - 1; i >= 0; i--) {
                if (_selets[i] === row.id) {
                    _selets.splice(i,1)
                }
            }
        },
        getSel_receiver (seletion, row) {
           this.selectReceiverData.push(row.id)
        },
        selectCancel_receiver (seletion, row) {
            let _selets2 = this.selectReceiverData
            // 从选种的集合中删除数据
            for (var i = _selets2.length - 1; i >= 0; i--) {
                if (_selets2[i] === row.id) {
                    _selets2.splice(i,1)
                }
            }
        },
        selectChange (seletion) {
            let newdata = []
            for (let index = 0; index < seletion.length; index++) {
                const element = seletion[index]
                newdata.push(element.id)
            }
            this.selectReceiverData = newdata
        },
        relieveBindData(relationId){
            this.partyDataModel = false
            let _that = this
            let url = 'adminlogin/party/relieveBindData'
            let data = {
                relationId:relationId
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(200 == res.code){
                    _that.partyData.splice(_that.index, 1)
                    //_that.personalInfo(_that.partyId)
                }else{
                    _that.$Message.success('数据原因，请联系管理员。')
                }

            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        }
    },
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }

    .small-title{
        font-style: normal;
        font-weight: bold;
        font-size:14px;
    }

    .hide-header-checkbox thead .ivu-checkbox-wrapper {
        display: none !important
    }
</style>

